<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<!-- 导入css样式 -->
	<link href="../../lib/css/bootstrap.min.css" rel="stylesheet" />
	
	<!-- 导入jQuery库 -->
	<script type="text/javascript" src="../../lib/jquery/jquery-1.11.3.min.js" ></script>
	
	<!-- 导入js库 -->
	<script type="text/javascript" src="../../lib/js/bootstrap.min.js" ></script>
	
	</head>
	<body>
	<div>
	<div>
		<div>
			<label for="isMain">是否户主</label>
			<select  name="isMain" id="isMain" ><option>是</option><option>否</option></select>&nbsp;
			<label for="name">姓名</label>
			<input  type="text" name="name" id="name"  />&nbsp;
			<label for="idcard">身份证号</label>
			<input  type="text" name="idcard" id="idcard"  />&nbsp;
			<label for="idcard">手机号</label>
			<input  type="text" name="phone" id="phone"  />&nbsp;
			<label for="family_status">与户主关系</label>
			<input  type="text" name="family_status" id="family_status"  />&nbsp;
		</div>
		<div><input type="text" readonly="readonly" name="totalNum" id="totalNum"/></div>
		<div><button onclick="addTo()">添加</button><button onclick="clearAll()">清除</button></div>
	</div>
	</div>
	<div>
	【<font color="#FF0000">户主只能添加一个,如果需要修改户主必须先删除已经选的户主</font>】
		<form action="#" method="post" id="allForm" >
		<table border="1" cellpadding="0">
			<tr id="thId">
				<th>是否户主</th><th>姓名</th><th>身份证号</th><th>手机号码</th><th>与户主关系</th><th>删除</th>
			</tr>
			<!--<tr class="member">
				<td class="isMain">是</td><td class="name">张三</td><td><a href="javascript:void(0);" onclic="delOne()"><font color="red">X</font></a></td>
			</tr>-->
		</table>	
		</form>
		<button onclick="subAll()">提交</button>
	</div>
	<script>
		$(function(){
//			alert("1231");
		});
		//是否选择了户主的标志位
		var isCheckMain = false;
		var totalNum = 0;//家庭人数
		
		function addTo(){
			
			//校验输入不通过直接退出
			if(!verifyFamily()){
				return;
			}
			
			//没添加一次家庭人数增加
			totalNum = totalNum + 1;
			setTotalNum(totalNum);
			
			//获得填写的字段
			var isMain = $("#isMain").val().trim();
			var name = $("#name").val().trim();
			var idcard = $("#idcard").val().trim();
			var family_status = $("#family_status").val().trim();
			var phone = $("#phone").val().trim();
			
			
			//拼接tr字符串
			var trBegin = '<tr class="member">';
			var trMain = '<td class="isMain">'+ isMain +'</td><td class="name">'+ name +'</td><td class="idcard">'+ idcard +'</td><td class="family_status">'+ family_status +'</td><td class="phone">'+ phone +'</td>' ;
			var trDel = '<td style="text-align:center;"><a href="javascript:void(0);" onclick="delOne(this);"><font color="red">X</font></a></td>';
			var trEnd = '</tr>';
			var trHtml = trBegin + trMain + trDel + trEnd;
			console.log(trHtml);
			//获得tr判断是否存在,存在的话添加第一个
			if(!hasFirstTr()){
				console.log("没有 tr ...");
				
				
				$("#thId").after(trHtml);
			}else{//否则从最后一个class为member后面添加
				console.log("存在一个  tr ...");
				$(".member").last().after(trHtml);
			}
			
			//处理是否选择了户主的情况
			if(isCheckMain = true){//以经选择了户主不能再选择
				/*isCheckMain = true;*/
				$("#isMain").val("否");
				$("#isMain").attr("disabled","disabled");
				console.log($("#isMain").attr("disabled"));
			}else{//未选择户主可以再次选择
				$("#isMain").removeAttr("disabled");
			}
			
		}
		
		
		//清除所有
		function clearAll(){
			/*$("#isMain").val().trim();*/
			$("#name").val("");
			$("#idcard").val("");
			$("#family_status").val("");
			$("#phone").val("");
		}
		
		/*提交所有的填写好的字段
		 *使用字符串拼接$表示行内元素拼接,#表示行之间拼接
		 * 首行表示地区信息
		 * */
		function subAll(){
			//拼接首行基本信息
			/*var city = "某市";
			var town = "某镇";
			var village = "某村";
			var basicRow = city +"$"+ town +"$"+ village + "#";*/
			//拼接公共字段的字符串
			var basicRow = joinCommon();
			
			console.log(basicRow);
			
			//拼接一个户的信息
			var family = "";
			$(".member").each(function(index){
				var isMain = $(this).children("td.isMain").text();
				if(isMain === "是"){//如果选择了户主
					isCheckMain = true;//标志位为true
				}
				var name = $(this).children("td.name").text();
				var idcard = $(this).children("td.idcard").text();
				var family_status = $(this).children("td.family_status").text();
				var phone = $(this).children("td.phone").text();
				
				family = family + isMain + "$" + name +"$"+ idcard +"$"+ family_status +"$"+ phone +"#";
			});
			
			/*var allRow = oneRow + family;*/
			console.log(family);
			
			//如果没有输入户主
			if(!isCheckMain){
				alert("请增加户主信息!");
				return;
			}
			
			//提交所有的数据
			sunAllData(basicRow,family);
			
		}
		
		function sunAllData(basicRow,family){
			$.ajax({
				type:"post",
				url:"/dataEntry/moveLand.do",
				async:true,
				dataType:'json',
				data : {'time':new Date(), 'basicRow':basicRow, 'family':family },
				success : function (data){
					var success = data.msg;
					var errorMsg = data.errorMsg;
					if(success === "true"){//提交成功
						
					}else if(errorMsg != "" && errorMsg != null){//有错误信息
						if(errorMsg === ""){//字段填写错误
							// ... 
						}
					}
				},
				error : function (){
					alert("出现异常,请稍后重试!");
				}
			});
		}
		
		/**
		 * 拼接公共的字符串
		 */
		function joinCommon(){
			var city = "某市";
			var town = "某镇";
			var village = "某村";
			var basicRow = city +"$"+ town +"$"+ village + "#";
			return basicRow;
		}
		
		
		//判断第一个tr有没有
		function hasFirstTr(){
			var hasTr = false;
			var trMember = $(".member").eq(0).html();
//			alert(trMember);
			console.log(trMember);
			if(trMember === undefined || trMember === ""){
				console.log("没有tr了...");
			}else{
				console.log("tr存在...");
				hasTr = true;
			}
			
			return hasTr;
		}
		
		//删除一个 tr
		function delOne(tag){
			
			//没删除一次家庭人数减少
			totalNum = totalNum - 1;
			if(totalNum < 0){
				totalNum = 0;
			}
			setTotalNum(totalNum);
			
			console.log(tag);
			//判断删除的一条是否是户主
			var isMain = $(tag).parent().parent().children("td.isMain").text();
			if(isMain === "是"){
				isCheckMain = false;
			}
			
			//处理是否选择了户主的情况
			if(isCheckMain){//以经选择了户主不能再选择
				$("#isMain").attr("disabled","disabled");
			}else{//未选择户主可以再次选择
				$("#isMain").removeAttr("disabled");
			}
			
			$(tag).parent().parent().remove();
		}
		
		function setTotalNum(num){
			$("#totalNum").val(num);
		}
		
		/**
		 * 校验所有的家庭成员输入框
		 */
		function verifyFamily(){
			var flag = false;
						
			var isMain = $("#isMain").val().trim();
			var name = $("#name").val().trim();
			var idcard = $("#idcard").val().trim();
			var family_status = $("#family_status").val().trim();
			var phone = $("#phone").val().trim();
			
			//验证中文姓名
			if(name != null && name != "" && name != undefined){
				if(!/(^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$)/.test(name)){
					flag = false;
					alert("请输入中文姓名!");
					return;
				}else{
					flag = true;
				}
			}else{
				flag = false;
				alert("输入姓名不能为空!");
				return;
			}
			
			//验证身份证
			var idPattern = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
			if(idcard != null && idcard != "" && idcard != undefined){
				if(!idPattern.test(idcard)){
					flag = false;
					alert("请输入正确的身份证信息!");
					return;
				}else{
					flag = true;
				}
			}else{
				flag = false;
				alert("输入身份证不能为空!");
				return;
			}
			
			//验证与户主关系
			if(family_status != null && family_status != "" && family_status != undefined){
				flag = true;
			}else{
				alert("与户主关系不能为空!");
				return;
			}
			
			return flag;
		}
		
		
	</script>	
	
	
	</body>
</html>
